<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
	<my-com1></my-com1>
	<my-com2></my-com2>
	<my-com3></my-com3>
</div>


<!--第三种创建的 外部组件-->
<template id="temp3">
	<div>
		<h3>第三种:这是使用template外部组件哦</h3>
	</div>
</template>


<script type="text/javascript">
	//第一种
	Vue.component("myCom1", Vue.extend({ template: '<h3>第一种:这是里面使用Vue.extend创建的组件</h3>' }))

	//第二种
	Vue.component("myCom2", {
		template: `<h3>第二种:这是第二种里面直接使用template创建组件的方法</h3>`,
		// template: `#temp3`,
	})

	//第三种
	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components: {
			myCom3: { template: '#temp3' }, // 使用 template
		}
	})
</script>